import { UserOutlined, PhoneOutlined } from '@ant-design/icons';
import { Arrow, ArrowLeft, Close, ClockO } from '@react-vant/icons';
import React, { useState,useEffect } from 'react';
import { Form, Input, Button, message, Card } from 'antd';
import styles from '../css分支/Update_zhanghao.module.css'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
export default function Update_zhanghao() {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const navigate = useNavigate();
  //回显账号和手机号
  // 模拟保存修改
  const handleSave = async (values) => {
    setLoading(true);
    try {
      // 模拟网络请求
      await axios.post('http://localhost:3000/xzx/update_business',values)
      
        message.success('修改成功！');
      // console.log(values);
      setTimeout(() => {
        navigate('/shezhi');
      }, 2000);
    } catch (error) {
      message.error('修改失败，请重试');
    } finally {
      setLoading(false);
    }
  };
  return (
    <div className={styles.main}>
      <div className={styles.head}>
        <ArrowLeft style={{ marginLeft: '0.1rem' }} onClick={() => { navigate(-1) }} />
        <p style={{ fontSize: '0.22rem' }}>设置</p>
        <p style={{ marginRight: '0.1rem' }}></p>
      </div>

      <div className={styles.container}>
        <Card title="账号设置" className={styles.card}>
          <Form form={form} onFinish={handleSave}>
            {/* 修改账号名称 */}
            <Form.Item
              name="username"
              label="账号名称"
              rules={[
                { required: true, message: '请输入账号名称' },
                { min: 2, max: 16, message: '账号名称长度为 2-16 个字符' },
              ]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="请输入新的账号名称"
              />
            </Form.Item>

            {/* 修改绑定手机号 */}
            <Form.Item
              name="phone"
              label="绑定手机号"
              rules={[
                { required: true, message: '请输入手机号' },
                { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号' },
              ]}
            >
              <Input
                prefix={<PhoneOutlined />}
                placeholder="请输入新的手机号"
              />
            </Form.Item>

            {/* 提交按钮 */}
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                loading={loading}
                block
              >
                保存修改
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  )
}
